/**
 * 仅用于薪资参考审批流程
 */
import React from 'react';
import { Row, Radio } from 'antd';
import DataUpdate from '@/components/DataUpdate';
import { withRouter } from 'umi';
import { Pagination } from '@/components';
import { AnchorPart, AnchorTableHeader } from '@/components/AnchorWrapper';
import useEditionDetailList from './useEditionDetailList';

const expandStyle = {
    display: 'inline-block',
    fontSize: '16px',
    border: '1px solid #eee',
    height: '17px',
    width: '16px',
    lineHeight: '12px',
    paddingLeft: '2px',
    textAlign: 'center',
    verticalAlign: 'middle'
};
const TableDiff = React.forwardRef(
    ({ value, location, type, onChange = () => {}, setSalaryStandardName = () => {}, ...rest }, ref) => {
        const { query } = location;
        const ftype = type || query.ftype;
        const [pagination, setPagination] = React.useState({ current: 1, pageSize: 50 });
        const [total, dataSource, loading] = useEditionDetailList(value, pagination); // 版本列表详情数据
        const [duration, setDuration] = React.useState('year');
        const [fileType, setFileType] = React.useState('');
        // const [expand, setExpand] = React.useState(true); //
        const [expkeys, setExpkeys] = React.useState([]);
        React.useEffect(() => {
            onChange(value);
        }, [value]);

        React.useEffect(() => {
            const standardName = dataSource?.[0]?.salaryStandardName ?? '';
            setSalaryStandardName(standardName.includes('微微') ? '微微' : '市场');
            setFileType(standardName);
            setExpkeys(dataSource && dataSource.map(item => item.id));
        }, [dataSource]);

        const jobFiled = [
            {
                title: '影响到以下微微职位',
                dataIndex: 'affectPost'
            }
        ];

        const jobFileRemark = [
            {
                title: '备注',
                dataIndex: 'remark'
            }
        ];
        const extraColumnRemark = fileType.includes('微微') ? jobFileRemark : [];

        const extraColumn = ftype === 'rollback' ? [] : jobFiled;

        const formatter = text => {
            if (text === undefined) {
                return text;
            }
            let result = text;
            if (duration === 'month') {
                result = parseFloat((Number(result) / 16).toFixed(2)); // 不补0
            }
            result = String(result ?? '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            return result;
        };

        const renderFirstTitle = () => {
            const expandIcon =
                dataSource.length > 0 && dataSource[0].expandFlag === 1 ? (
                    <a
                        style={expandStyle}
                        onClick={() => {
                            if (expkeys.length > 0) {
                                // 通过维护id长度来判断是否全部展开与否
                                setExpkeys([]);
                            } else {
                                setExpkeys(dataSource && dataSource.map(item => item.id));
                            }
                        }}
                    >
                        {expkeys.length > 0 ? '-' : '+'}
                    </a>
                ) : null;
            return (
                <>
                    {expandIcon}
                    <span style={{ paddingLeft: 10 }}>数据名称</span>
                </>
            );
        };

        const columns = [
            {
                title: renderFirstTitle(),
                dataIndex: 'salaryStandardName'
            },
            {
                title: '职位类别',
                dataIndex: 'postTypeName'
            },
            {
                title: '职位名称',
                dataIndex: 'postName'
            },
            {
                title: '职位代码',
                dataIndex: 'postCode'
            },
            {
                title: '一线25分位',
                dataIndex: 'firstLineTwoQuantile',
                formatter
            },
            {
                title: '一线50分位',
                dataIndex: 'firstLineFiveQuantile',
                formatter
            },
            {
                title: '一线75分位',
                dataIndex: 'firstLineSevenQuantile',
                formatter
            },
            {
                title: '一线90分位',
                dataIndex: 'firstLineNineQuantile',
                formatter
            },
            {
                title: '二线25分位',
                dataIndex: 'secondLineTwoQuantile',
                formatter
            },
            {
                title: '二线50分位',
                dataIndex: 'secondLineFiveQuantile',
                formatter
            },
            {
                title: '二线75分位',
                dataIndex: 'secondLineSevenQuantile',
                formatter
            },
            {
                title: '二线90分位',
                dataIndex: 'secondLineNineQuantile',
                formatter
            },
            ...extraColumnRemark,
            ...extraColumn
        ];

        const handlePaginationChange = _pagination => {
            setPagination({ ...pagination, ..._pagination });
            setExpkeys([]);
        };

        function handleRadioChange(e) {
            setDuration(e.target.value);
        }

        return (
            <>
                <AnchorPart floatStyle={{ zIndex: 100, backgroundColor: '#fff' }} thresholdTop={300} fixedTop={110}>
                    <Row type="flex" justify="end" style={{ marginBottom: 12 }}>
                        <Radio.Group value={duration} onChange={handleRadioChange}>
                            <Radio.Button value="year">年薪模式</Radio.Button>
                            <Radio.Button value="month">月薪模式</Radio.Button>
                        </Radio.Group>
                    </Row>
                </AnchorPart>
                <AnchorTableHeader
                    floatStyle={{ backgroundColor: '#fff', zIndex: 100, position: 'relative' }}
                    thresholdTopOffset={40}
                    fixedTop={106}
                >
                    <DataUpdate
                        getSource={{
                            dataSource,
                            columns
                        }}
                        tableConfig={{
                            modifyType: 'modifyType',
                            difference: 'difference'
                            // expandAllRows: true
                        }}
                        tableProps={{
                            scroll: { x: 'max-content' },
                            rowKey: 'id',
                            size: 'small',
                            loading,
                            expandedRowKeys: expkeys,
                            onExpand: (b, r) => {
                                const newExp = b ? [...expkeys, r.id] : expkeys.filter(i => i !== r.id);
                                setExpkeys(newExp);
                            }
                        }}
                        ref={ref}
                        {...rest}
                    />
                </AnchorTableHeader>
                {total > 10 && <Pagination total={total} onChange={handlePaginationChange} {...pagination} />}
            </>
        );
    }
);

export default withRouter(TableDiff);
